<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>青旅旅行社服务平台</title>
    <script src="./js/vue2.js"></script>
    <script src="./js/axios.min.js"></script>
    <style>
        h1{
            text-align: center;
        }
        table.tb-tour{
            margin: 0 auto;
            width: 800px;
        }
        table.tb-tour thead{
            background: blueviolet;
            color: white;
        }
        table.tb-tour tr:nth-of-type(even){
            background-color: bisque;
        }

        table.tb-spot{
            width: 600px;
            margin: 30px auto;
        }
        table.tb-spot thead{
            background: hotpink;
            color: white;
        }
        table.tb-spot tr:nth-of-type(even){
            background-color:yellowgreen;
        }
    </style>
</head>
<body>
    <h1>青旅旅行社服务平台</h1>
    <div id="app">
        <a href="add.html">添加</a>
        <table class="tb-tour">
            <thead>
                <tr>
                    <th>旅游路线名称</th>
                    <th>类型</th>
                    <th>价格(元)</th>
                    <th>咨询电话</th>
                    <th>咨询人</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
            <tr v-for="item in routes">
                <td>{{item.trName}}</td>
                <td>{{item.trType==1?'自由行':'跟团游'}}</td>
                <td>{{item.trPrice}}</td>
                <td>{{item.trPhone}}</td>
                <td>{{item.trUser}}</td>
                <td>{{item.createTime}}</td>
                <td>
                    <a @click="handleDetailClick(item.trId)" href="javascript:void(0)">详情</a>
                    <a @click="handleDeleteClick(item.trId)" href="javascript:void(0)">删除</a>
                    <a :href="'update.html?id='+item.trId">编辑</a>
                </td>
            </tr>
            </tbody>
        </table>
        <table class="tb-spot">
            <thead>
                <tr>
                    <th>景点名称</th>
                    <th>建议游玩时间</th>
                    <th>景点介绍</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in spots">
                    <td>{{item.ssName}}</td>
                    <td>{{item.ssDuration}}</td>
                    <td>{{item.ssContent}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                routes:[],
                spots:[]
            },
            methods:{
                loadroutes(){
                    axios.get('http://127.0.0.1:8080/route/all')
                    .then(res => {
                        this.routes = res.data.data
                    })
                },
                handleDetailClick(trId){
                    axios.get('http://127.0.0.1:8080/spot/list?trId='+trId)
                    .then(res => {
                        this.spots = res.data.data
                    })
                },
                handleDeleteClick(trId){
                    const flag = confirm("请确认是否删除旅游路线?")
                    if(flag){
                        axios.post('http://127.0.0.1:8080/route/delete?trId='+trId)
                        .then(res => {
                            if(res.data.success){
                                this.loadroutes();
                                alert('删除成功')
                            }
                        })
                    }
                }
            },
            created(){
                this.loadroutes()
            }
        })
    </script>
</body>
</html>